<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>案例3移动下拉框</title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
	</head>
	<body>
		<select id="leftselect" size="10"  style=" width: 100px;">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">南京</option>
			<option value="4">广州</option>
			<option value="5">杭州</option>
			<option value="6">深圳</option>
		</select>
	
		<div style="display: inline-block; vertical-align: top; margin-top: 20px;">
			
			<input type="button" value="右移>>" id="toRight" /><br/>
			<input type="button" value="左移<<" id="toLeft"/><br/>
			<input type="button" value="全部右移" id="toRightAll" /><br/>
			<input type="button" value="全部左移" id="toLeftAll"/>
			
		</div>
		<select id="rightselect" size="10" multiple="multiple" style=" width: 100px;">
			
		</select>
		
		<script type="text/javascript">
			
			$(function(){
				$("#toRight").click(function(){
					var $options=$("#leftselect option:selected");
					$("#rightselect").append($options);
				});
				$("#toLeft").click(function(){
					var $options=$("#rightselect option:selected");
					$("#leftselect").append($options);
				});
				$("#toRightAll").click(function(){
					var $options=$("#leftselect option");
					$("#rightselect").append($options);
				});
				$("#toLeftAll").click(function(){
					var $options=$("#rightselect option");
					$("#leftselect").append($options);
				});
			})
		</script>
	</body>
</html>
